{extend name="layout"}
{block name="title"}登录_社优保{/block}
{block name="body"}
<div class="login-head">
    <img src="__ROOT__/static/mobile/images/login-bg4.png" alt="">
</div>
<div class="login-box" data-tab="account">
    <form data-login-form onsubmit="return false"  data-auto-login="true"   onkeydown="if(event.keyCode==13)return false;" method="post"  autocomplete="off" data-callback="wxCallback">
		<div class="form-box" data-tab="account">
			<div class="input-box">
				<span class="iconfont icon-gongsichaxun"></span>
				<input  required pattern="^[\S]{4,}$" name="username"  autocomplete="off" placeholder="请输入公司名称">

			</div>
			<div class="input-box">
				<span class="iconfont icon-mima"></span>
				<input class="layui-input" required pattern="^[\s\S]{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="请输入密码">
				<div class="isDisplay">
					<span class="iconfont icon-eye1"></span>
					<span class="iconfont icon-eye" style="display: none"></span>
				</div>
			</div>
		</div>

		<div class="form-box" data-tab="code">
			<div class="input-box">
				<span class="iconfont icon-a-shoujihao1"></span>
				<input disabled   pattern="^[\S]{4,}$" id="phone" name="mobile"  autocomplete="off" placeholder="请输入手机号">

			</div>
			<div class="input-box">
				<span class="iconfont icon-a-yanzhengma1"></span>
				<input disabled   pattern="^[\d]{4,}$" name="verify" maxlength="32" type="text" autocomplete="off" placeholder="请输入验证码">

				<p class="phone-code">获取验证码</p>


			</div>
		</div>


        <div class="login-button">
            <a class="forget-pw" style="margin-right: 5px;" href="{:url('mobile/login/forgetpw')}" >忘记密码</a>
            <a class="a-code-login" data-tab="code" style="margin-right: 5px;">验证码登录</a>
            <input type="hidden" name="skey" required  value="{$loginskey|default=''}" >
            <input type="hidden" name="platform" required  value="" >

            <button  type="submit" class="btn-login" data-form-loaded="登录">登录中</button>
            <a href="{:url('mobile/login/register')}" type="button" class="btn-register" >注册</a>

        </div>
		<div class="agreement">
				<input type="checkbox" checked name="agree" required placeholder="请阅读并同意社优保服务平台协议">
			<p>我已阅读并同意 <a href="{:url('mobile/login/agreement')}">《社优保服务平台协议》</a></p>

		</div>
    </form>
</div>




{/block}
{block name="script"}
<script>
	$(function (){
		var Height = $('body').height();
		// 回到顶部
		$(window).resize(function () {
			// 回到顶部
			$('body').height(Height);
			// 回到顶部
		});
	})
</script>
<script>
	$(function (){
		init()


		$(".isDisplay").on("click","span",function(){
			$(this).hide().siblings().show();
			console.log($("[name='password'][type='password']").length)
			if($("[name='password'][type='password']").length){
				$("[name='password'][type='password']").attr("type","text")
			}else{
				$("[name='password'][type='text']").attr("type","password")
			}
		})


		$(".btn-login").on('keydown', function(e) {
			if(e.keyCode == 13) {
				e.preventDefault()
			}
		})
		document.onkeydown = function (e) { // 回车提交表单
			// 兼容FF和IE和Opera
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {

				$(".btn-login").click();
			}
		}

		$(".a-code-login").on("click",function(){

			var currentTab = $(this).attr('data-tab')
			$(".login-box").attr("data-tab",currentTab)

			if(currentTab == "account"){
				$(".forget-pw").show()
				$(".a-code-login").attr("data-tab","code").html("验证码登录")
				// 切换为用户名登录
				$(".form-box[data-tab='account']").find('input').attr("required","required").removeAttr("disabled").val("")
				$(".form-box[data-tab='code']").find('input').attr("disabled","disabled").removeAttr("required").val("")

			}else{
				$(".forget-pw").hide()
				$(".a-code-login").attr("data-tab","account").html("账号登录")
				$(".form-box[data-tab='code']").find('input').attr("required","required").removeAttr("disabled").val("")
				$(".form-box[data-tab='account']").find('input').attr("disabled","disabled").removeAttr("required").val("")
			}

		})

		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".phone-code").on("click",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("index/login/send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":2
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									// code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	})


	function init(){

		var is_wx = 2 //不在微信

		if(isWx()){
			is_wx = 1
		}
	
		$("[name='platform']").val(is_wx)

	}
	function wxCallback(res){

		if(res.code==1){
			window.location.href = res.data.url
		}else{
			$.msg.error(res.info)
		}
		return false

	}

</script>
{/block}


{block name="style"}
<style>
	.login-box form .form-box{
		display: none;
	}
	.login-box[data-tab="account"] form .form-box[data-tab="account"] {
		display: block;
	}
	.login-box[data-tab="code"] form .form-box[data-tab="code"] {
		display: block;
	}
</style>
{/block}
